<template>
  <div class="container">
    <div class="service-page__section service-page__header">
      <div class="corner-select">
        <span class="corner-select__option" @click="selectOne(0)" :class="{ active: activeIndex === 0 }">高低量化</span
        ><span class="corner-select__option" @click="selectOne(1)" :class="{ active: activeIndex === 1 }"
          >趋势量化</span
        >
      </div>
    </div>
    <div class="content-sec">
      高低量化属于震荡型波动指标, 一般而言, 出现高点预警表明价格处于高位, 反之说明价格处于低位
    </div>
    <!-- 模块3 -->
    <div class="service-page__section">
      <div class="service-page__title">只推送形成信号</div>
      <div class="service-page__subtitle">关闭后会推送 “预警” “形成” “消失” 信号</div>
      <label class="am-switch service-page__switch am-switch-android"
        ><input type="checkbox" name="" class="am-switch-checkbox" value="off" />
        <div class="checkbox"></div
      ></label>
      <div class="time-select warning__select">
        <div class="time-select__title">
          <div class="select-title">
            <i aria-label="icon: check-circle" class="anticon anticon-check-circle"
              ><svg
                viewBox="64 64 896 896"
                focusable="false"
                class=""
                data-icon="check-circle"
                width="1em"
                height="1em"
                fill="currentColor"
                aria-hidden="true"
              >
                <path
                  d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0 0 51.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"
                />
                <path
                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
                /></svg></i
            ><span>微信</span>
          </div>
        </div>
        <div class="time-select__option-wrap clear-both"></div>
      </div>
      <div class="warning__divider"></div>
      <div class="time-select warning__select" style="display: none">
        <div class="time-select__title">
          <div class="select-title">
            <i aria-label="icon: check-circle" class="anticon anticon-check-circle"
              ><svg
                viewBox="64 64 896 896"
                focusable="false"
                class=""
                data-icon="check-circle"
                width="1em"
                height="1em"
                fill="currentColor"
                aria-hidden="true"
              >
                <path
                  d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0 0 51.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"
                />
                <path
                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
                /></svg></i
            ><span>电话</span>
          </div>
          <span class="phone-times">剩余: 0次</span>
        </div>
        <div class="time-select__option-wrap clear-both"></div>
      </div>
      <div class="warning__toggle">
        <i aria-label="icon: double-right" class="anticon anticon-double-right" style="transform: rotate(90deg)"
          ><svg
            viewBox="64 64 896 896"
            focusable="false"
            class=""
            data-icon="double-right"
            width="1em"
            height="1em"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1A7.98 7.98 0 0 0 188 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5zm304 0L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1A7.98 7.98 0 0 0 492 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"
            /></svg
        ></i>
      </div>
    </div>
    <!-- 模块4 -->
    <div class="service-page__section">
      <div class="service-page__title">需要预警的币种</div>
      <div class="service-page__subtitle">当你关注的数字资产发生预警时推送</div>
      <span
        ><span class="currency-type__option selected">现货</span
        ><span class="currency-type__option"
          >合约<img
            class="vip-mark"
            src="" /></span
      ></span>
      <div class="currency-select"></div>
      <div class="service-page__footer">
        <div>① 电话号码绑定请点击<a href="/btc/myCoin/bindMobile">【绑定手机号】</a></div>
        <div>② 如需要获得更多电话预警次数, 可参与<a href="/btc/myCoin">【活动兑换】</a></div>
        <div>③ 现货预警价格来自OKEx现货，合约预警价格来自OKex季度合约</div>
        <div>④ 如需开通会员获取更多周期推送服务, 可点击<a href="/btc/myVip">【订阅会员】</a></div>
      </div>
    </div>
  </div>
</template>

<script>
import store from '@/store'

export default {
  name: 'list',
  data() {
    return {
      activeIndex: 0
    }
  },
  computed: {
    top: () => {
      return store.getters.navHeight // 导航高度
    }
  },
  mounted() {},
  methods: {
    selectOne(item) {
      this.activeIndex = item
    }
  }
}
</script>

<style lang="less" scoped>
@import './index';
</style>
